<template>
  <div>
    <SearchForm @search="getTableData" @reset="clearSearch">
      <el-col :span="8" :xs="24" v-if="$permiss[845]">
        <el-form-item :label="$t('所属租户')">
          <el-select v-model="page.adminUserId" style="width: 100%">
            <el-option v-for="item in tenantList" :key="item.adminUserId" :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24" v-if="$permiss[846]">
        <el-form-item :label="$t('APP名称')">
          <el-select style="width: 100%" v-model="page.productName" clearable>
            <el-option v-for="item in productList" :key="item.productId" :label="item.productName"
                       :value="item.productName"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('审核阶段')">
          <el-select style="width: 100%" v-model="page.approvalType" clearable>
            <el-option :label="$t('初审')"
                       :value="1"></el-option>
            <el-option :label="$t('终审')"
                       :value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('拒绝原因')">
          <el-select style="width: 100%" v-model="page.refuseCause" clearable>
            <el-option v-for="item in remissionList" :key="item.key" :label="item.value"
                       :value="item.key"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item :label="$t('申请时间')">
          <el-date-picker
              v-model="page.timeValue"
              style="width: 100%"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="~"
              :start-placeholder="$t('开始日期')"
              :end-placeholder="$t('结束日期')">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </SearchForm>
    <el-card shadow="never" style="margin-top: 10px">
      <div>
        <el-button type="text" style="font-size: 16px">{{ $t('初审拒绝订单总数') }}: {{ totalData.firstTrial }}</el-button>
        <el-button type="text" style="font-size: 16px">{{ $t('终审拒绝订单总数') }}: {{ totalData.finalJudgment }}</el-button>
      </div>
      <Table :loading="loading" :table-column="tableColumn" :table-data="tableData" :page="page"
             @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange">
        <template slot="type" slot-scope="{row}">
          {{ row.approvalType === 1 ? $t('初审') : $t('终审') }}
        </template>
        <template slot="detail" slot-scope="{row}">
          <el-button type="text" @click="lookDeatail(row)">{{ $t('详情') }}</el-button>
        </template>
      </Table>
    </el-card>
    <Dialog :visible.sync="visibleDetails" :title="tableRows.refuseCause + $t('详情')" :footer="false" width="60%">
      <Table :table-column="detailsTableColumn" :table-data="detailsTableData" :page="false">
        <template slot="type" slot-scope="{row}">
          {{ row.approvalType === 1 ? $t('初审') : $t('终审') }}
        </template>
      </Table>
    </Dialog>
  </div>
</template>

<script>
import {defaultTimeDate} from "@/utils/tools";
import {selectProduct, selectTenant} from "@/api/system"

export default {
  name: 'PeopleRefuse',
  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        timeValue: defaultTimeDate(14)
      },
      tenantList: [],
      productList: [],
      tableColumn: [
        {label: this.$t('拒绝原因'), prop: 'refuseCause', minWidth: 100},
        {label: this.$t('审核阶段'), prop: 'approvalType', slot: "type", minWidth: 100},
        {label: this.$t('拒绝次数'), prop: 'refuse', minWidth: 100},
        {label: this.$t('新客拒绝次数'), prop: 'newRefuse', minWidth: 100},
        {label: this.$t('老客拒绝次数'), prop: 'oldRefuse', minWidth: 100},
        {label: this.$t('拒绝率'), prop: 'refuseRate', minWidth: 100},
        {label: this.$t('新客拒绝率'), prop: 'newRefuseRate', minWidth: 100},
        {label: this.$t('老客拒绝率'), prop: 'oldRefuseRate', minWidth: 100},
        {label: this.$t('操作'), minWidth: 100, slot: 'detail'},
      ],
      tableData: [],
      detailsTableColumn: [
        {label: this.$t('拒绝标签'), prop: 'refuseCause', minWidth: 100},
        {label: this.$t('审核阶段'), prop: 'approvalType', slot: "type", minWidth: 100},
        {label: this.$t('拒绝次数'), prop: 'refuse', minWidth: 100},
        {label: this.$t('新客拒绝次数'), prop: 'newRefuse', minWidth: 100},
        {label: this.$t('老客拒绝次数'), prop: 'oldRefuse', minWidth: 100},
        {label: this.$t('拒绝率'), prop: 'refuseRate', minWidth: 100},
        {label: this.$t('新客拒绝率'), prop: 'newRefuseRate', minWidth: 100},
        {label: this.$t('老客拒绝率'), prop: 'oldRefuseRate', minWidth: 100},
      ],
      detailsTableData: [],
      loading: false,
      visibleDetails: false,
      remissionList: [],
      tableRows: {},
      totalData: {}
    }
  },

  mounted() {
    this.getSelect()
  },
  methods: {
    async getTableData() {
      this.loading = true
      const [datetimeStart, datetimeEnd] = this.page.timeValue || []
      const params = {
        ...this.page,
        datetimeStart, datetimeEnd
      }
      delete params.timeValue
      this.getTotal(params)
      const res = await this.$get('report/employeeAuditRefuse', params)
      if (res.code === 1) {
        const {list, total} = res.data
        this.tableData = list
        this.page = {
          ...this.page,
          total: total,
        }
        this.loading = false
      }
    },
    async getTotal(params) {
      const res = await this.$get('report/employeeAuditRefuseTotal', params)
      if (res.code === 1) {
        this.totalData = res.data
      }
    },
    async getSelect() {
      this.tenantList = await selectTenant().then(res => res.data)
      if (this.tenantList.length !== 0) {
        // 管理员查看默认第一位租户
        this.page.adminUserId = this.tenantList[0].adminUserId
      }
      this.getTableData()
      this.productList = await selectProduct().then(res => res.data)
      this.$permiss[844] && this.getRemissionCause()
    },
    // 拒绝原因下拉
    async getRemissionCause() {
      const res = await this.$get('approveDetails/selectAuditCause', {isShow: 1})
      if (res.code === 1) {
        this.remissionList = res.data.filter(i => i.code === 0 && i.orderStatus === 1)
      }
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getTableData()
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getTableData()
    },
    clearSearch() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        adminUserId: this.page.adminUserId || null
      }
      this.getTableData()
    },
    async lookDeatail(row) {
      const [datetimeStart, datetimeEnd] = this.page.timeValue || []
      const {refuseCauseKey, approvalType, refuse} = row
      const params = {
        ...this.page,
        datetimeStart, datetimeEnd,
        refuseCause: refuseCauseKey, approvalType, refuse
      }
      delete params.timeValue
      const res = await this.$get('report/employeeAuditRefuseDetails', params)
      if (res.code === 1) {
        const {list} = res.data
        this.tableRows = {...row}
        this.visibleDetails = true
        this.detailsTableData = list
      }

    }
  }
}
</script>

<style scoped>

</style>
